<template>
	<view>
		<u-swiper
				:list="list5"
				@change="e => current = e.current"
				:autoplay="false"
				:height="400"
				bgColor="#000"
				@click="goPage"
		>
			<view
					slot="indicator"
					class="indicator"
			>
				<view
						class="indicator__dot"
						v-for="(item, index) in list5"
						:key="index"
						:class="[index === current && 'indicator__dot--active']"
				>
				</view>
			</view>
		</u-swiper>
		<view class="context">
			<view style="display: flex;justify-content: space-between;">
				<view style="display: flex;align-items: center;padding-bottom: 20rpx;">
					<u-avatar text="p"></u-avatar>
					<text style="padding-left: 20rpx;">盛璧微</text>
				</view>
				<view>
					<u-button color="rgb(160,130,102)" text="      +关注" size="small"></u-button>
				</view>
			</view>
			<u-gap height="1" bgColor="#bbb"></u-gap>
			<view style="margin-top: 20rpx;">
				<view class="title">坚持就是胜利</view>
				<view class="desc">感觉我的虎牙已经慢慢下来一点了</view>
				<view class="desc" style="color: plum;">#好物分享</view>
			</view>
			<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;">
				<view class="desc" style="font-size: 20rpx;">7小时前</view>
				<u-icon name="share" size="28"></u-icon>
			</view>
			
			<view style="margin-top: 20rpx;background-color: rgb(247,247,247);border-radius: 20rpx;padding: 20rpx;">
				<view style="display: flex;align-items: center;padding-bottom: 20rpx;">
				<u-icon name="heart" size="20"></u-icon>
				<u-avatar-group
						:urls="urls"
						size="25"
						gap="0.1"
				></u-avatar-group>
				</view>
				<u-gap height="1" bgColor="#bbb"></u-gap>
				<view style="padding-bottom: 80rpx;">
					<view v-for="item in 3" :key="item">
						<view style="display: flex;justify-content: space-between;">
						<view style="display: flex;">
							<u-icon name="chat" size="20"></u-icon>
							<view style="display: flex;align-items: center;">
								<u-avatar text="p" size="30"></u-avatar>
								<view style="padding-left: 10rpx;line-height: 35rpx;">
									<text style="font-size: 25rpx;color: #666;">是余震</text>
									<view style="font-size: 22rpx;">1123123</view>
									<view style="font-size: 20rpx;color: #666;" class="time">1小时前</view>
								</view>
							</view>
						</view>
						
						<view style="display: flex;align-items: center;">
							<u-icon name="thumb-up" size="20"></u-icon>
							0
						</view>
						</view>
					</view>
				</view>
				
				<view class="sendmsg">
					<view style="display: flex;align-items: center;padding-right: 20rpx;">
						<u-icon name="thumb-up" size="20"></u-icon>
						4
					</view>
					<view style="padding-right: 20rpx;">
						<u-icon name="heart" size="20"></u-icon>
					</view>
					<u-input placeholder="说点什么吧..."></u-input>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				],
				current:0,
				list5: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
			}
		},
		methods: {
			goPage(){
				uni.navigateTo({
					url:"./img_list"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.context{
		background-color: #fff;
		padding: 20rpx;
	}
.indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	.title{
		font-size: 30rpx;
		font-weight: bold;
	}
	.desc{
		color: #666;
		font-size: 25rpx;
		padding-top: 20rpx;
	}
	.sendmsg{
		display: flex;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background-color: #fff;
		left: 0rpx;
		align-items: center;
		padding: 20rpx 5rpx;
	}
</style>
